<template>
  <el-autocomplete
    v-model="aaf216"
    style="width: 100%"
    :debounce="1000"
    :value-key="'aaf216'"
    placeholder="银行网点编号、银行网点名称"
    :disabled="selfDis"
    :clearable="true"
    :fetch-suggestions="bankBaseInfoSearch"
    :loading="loading"
    :custom-item="true"
    :popper-append-to-body="true"
    @select="bankBaseInfoSelect"
    @change="fnHiddenSelectOptions"
    @blur="bankBaseInfoBlur"
    @focus="isFocus = true"
  >

    <!--    <template #default="{ item }">-->
    <!--      <div class="rpc-row" style="height: 30px;">-->
    <!--        <span class="rpc-text" :class="{'is-event-num': item.index % 2 == 0 }" style="width: 60%">{{ item.aaf217 }}</span>-->
    <!--        <span class="rpc-text" :class="{'is-event-num': item.index % 2 == 0 }" style="width: 20%">{{ item.aaf002 }}</span>-->
    <!--        <span class="rpc-text" :class="{'is-event-num': item.index % 2 == 0 }" style="width: 20%">{{ item.aaf216 }}</span>-->
    <!--      </div>-->
    <!--    </template>-->
    <template #default="{ item }">
      <div class="rpc-container" :class="{'has-unit': isShowUnit}">
        <div class="rpc-row">
          <div class="rpc-col name-col">
            <el-tooltip :content="item.aaf217" placement="top">
              <span ref="nameText" class="rpc-text">{{ item.aaf217 }}</span>
            </el-tooltip>
          </div>
          <!--          <div class="rpc-col id-col">-->
          <!--            <el-tooltip :content="item.aaf002" placement="top">-->
          <!--              <span class="rpc-text" ref="idText">{{ item.aaf002 }}</span>-->
          <!--            </el-tooltip>-->
          <!--          </div>-->
          <div class="rpc-col num-col">
            <el-tooltip :content="item.aaf216" placement="top">
              <span ref="numText" class="rpc-text">{{ item.aaf216 }}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
import bankApi from './rpc'
export default {
  name: 'BankRpc',
  data() {
    return {
      aaf216: '',
      selfDis: false,
      isFocus: false,
      isShowUnit: true,
      loading: false,
      bankData: []
    }
  },
  methods: {
    bankBaseInfoSearch(query, cb) {
      // 模拟搜索数据
      setTimeout(() => {
        this.loading = true
        this.getSearchResults(query, cb) // 用你自己的逻辑获取数据
        // cb(results)
        this.loading = false
      }, 500)
    },
    restAaf216(item) {
      this.aaf216 = item
    },
    getSearchResults(query, cb) {
      // 这里可以模拟返回一个搜索结果数组
      // 后台查询数据
      if (query === null || query === '' || query === undefined) {
        return []
      }
      bankApi.getbankInfo({ aaf216: query, aaf002: query, aaf217: query }).then(res => {
        this.bankData = res
        this.$nextTick(() => {
          cb(res)
        })
      })
      return this.bankData
    },
    bankBaseInfoSelect(item) {
      // 选择某项后的回调处理
      console.log('选中项:', item)
      this.$emit('bankRpcCallBack', item)
    },
    fnHiddenSelectOptions() {
      // 处理隐藏选项的逻辑
    },
    bankBaseInfoBlur() {
      // 失去焦点的处理逻辑
    }
  }
}
</script>

<style scoped>
.rpc-row {
  display: flex;
  justify-content: space-between;
}
.rpc-text {
  display: inline-block;
  padding: 0 10px;
}
.is-event-num {
  background-color: #f5f5f5;
}
/* 新增样式 */
.rpc-container {
  width: 100%;
}

.rpc-row {
  display: flex;
  align-items: center;
  height: 30px;
}

.rpc-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1px;
  box-sizing: border-box;
}

/* 默认列宽分配 */
.name-col { flex: 8; }
.id-col   { flex: 3; }
.num-col  { flex: 3; }
/*.unit-col { flex: 3; }*/

/* 当显示单位列时的特殊处理 */
/*.rpc-container.has-unit .name-col { flex: 2; }*/
/*.rpc-container.has-unit .id-col   { flex: 4; }*/
/*.rpc-container.has-unit .num-col  { flex: 2; }*/

.rpc-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
